<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            border: 4px solid transparent;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <p v-test:arg.a.b=" color1+'-itany' ">自定义指令的调用1</p> -->
        <p v-test:color=" color1 ">自定义指令的调用1</p>
        
        <input type="color" v-model="color1">

        <p v-test:background-color=" color2 ">自定义指令的调用2</p>

        <input type="color" v-model="color2">

        <p v-test:border-color.time=" color3 ">自定义指令的调用3</p>

        <input type="color" v-model="color3">

        <p v-test:[arg]=" color4 ">自定义指令的调用4</p>

        <input type="color" v-model="color4">
        <select v-model="arg">
            <option value="color">字体颜色</option>
            <option value="background-color">背景颜色</option>
            <option value="border-color">边框颜色</option>
        </select>
    </div>
</body>
<script>
    // 全局自定义指令方法
    // Vue.directive(id,callback|definition);
    //      id : 自定义指令名称（唯一）
    //      callback|definition ：指令对应的执行功能
    //            + callback(el,binding,newVnode,oldVnode)
    //                - el 指令所绑定的元素，可以用来直接操作 DOM。
    //                - binding 是一个对象 ，对象中包含了指令构成参数、修饰符、取值 ……
    //                   - name:  指令名称
    //                   - rawName: 指令调用时的表达式

    //                   - arg:  指令参数 , : 后定义的参数名称
    //                   - oldArg: 是指令 ： 后定义的 旧的参数名称

    //                   - expression:  指令取值，= 右侧的取值表达式
    //                   - value: 指令 = 右侧 表达式的计算结果
    //                   - oldValue:指令绑定变量发生变化后，调用该方法时 ，存储的 上次的结果值

    //                   - modifiers: 指令修饰符，.后定义的修饰符名称,为 Object{ key:value } 类型数据
    //                       - key 为修饰符名称，value取值 为 true
    //                           - true 作为value表示当前指令被启用
    //                           - 对象中没有修饰符key ,表示指令不启用
    //                           - 当没有修饰符时，表示该对象为空对象


    Vue.directive("test",function(el,binding,nvnode,ovnode){
        // console.log("自定义指令test");
        // 对DOM 进行相关操作
        // console.log(el);
        // console.log(binding);
        // console.log(binding.value);
        // el.style.color = "red";
        // el.style.color = binding.value;


        console.log(nvnode,ovnode);
        if(binding.modifiers.time){
            setTimeout(()=>{
                el.style[binding.arg] = binding.value;
            },3000)
        }else{
            el.style[binding.arg] = binding.value;
        }

    });


    new Vue({
        el:"#app",
        data:{
            color1:"#007bff",
            color2:"#6610f2",
            color3:"#6f42c1",
            color4:"#e83e8c",
            arg:"color"
        }
    })
    
</script>
</html>